<template>
    <el-upload ref="uploadInput" class="avatar-uploader" list-type="text" action="" accept=".jpg, .png" :limit="1"
        :auto-upload="false" :on-change="changeFile">
        <img style="width: 200px;height: 200px;" v-if="publicWelfareUrl.length > 0" :src="publicWelfareUrl"
            class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</template>

<script>
import { getBase64 } from "@/utils"
export default {
    props: ['typeName'],
    data() {
        return {
            publicWelfareUrl: []
        }
    },
    methods: {
        cleanimg(){
            this.publicWelfareUrl.splice(0, this.publicWelfareUrl.length);
        },
        changeFile(file, fileList) {
            // this.commodityForm.avatar = file.raw;
            // this.avatar = file.raw;
            this.publicWelfareUrl = []
            fileList.forEach(async item => {
                let img = await getBase64(item.raw);
                this.publicWelfareUrl.push(img);
            });
            this.$emit('callbackFile', { file: file.raw, typeName: this.typeName,publicWelfareUrl:this.publicWelfareUrl })
            // publicWelfareUrl:this.publicWelfareUrl,
            this.$refs.uploadInput.clearFiles()
        },
    }
}
</script>

<style lang="scss" scoped>
::v-deep.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    // position: relative;
    overflow: hidden;
    display: block;
}

.avatar-uploader {
    width: 200px;
    height: 200px;
    // margin-top: 40px;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
</style>